<template>
    <div class="component-wrapper">
        <div class="component-buttonbar">
            <n-button @click="onAdd">添加组件</n-button>
            <div class="csification">
                <div class="sreachBox">
                    <n-input size="small" v-model:value="searchV" type="text" placeholder="请输入组件名称" @input="handelSearch($event)" />
                </div>

                <n-button secondary type="primary" size="small">全部</n-button>
                <n-button secondary size="small">柱状图</n-button>
                <n-button secondary size="small">饼图</n-button>
                <n-button secondary size="small">折线图</n-button>
                <n-button secondary size="small">仪表盘</n-button>
                <n-button secondary size="small">地图</n-button>
                <n-button secondary size="small">其他</n-button>
            </div>

        </div>

        <div class="component-list-wrapper">
            <div v-for="(item, index) in data" :key="index" class="component-list-item" @click="onPreview(item.id)">
                <div class="thumbnail"><img :src="item.img? item.img:defaultImg()"></div>

                <div class="name">{{item.name}}</div>
                <div class="time">{{ item.createtime.substring(0,10) }}</div>
                <div class="remark">{{ item.remark }}</div>
                <div class="button">
                    <i class="iconfont icon-bianji2" @click.stop="onEdit(item.id)" title="编辑"></i>
                    <i class="iconfont icon-shanchu" @click.stop="openDelDialogBox(item.id)" title="删除"></i>
                    <a style="display: none;" @click="onPreview(item.id)">预览</a>
                    <!-- <a class="delColor" @click="openDelDialogBox(item.id)">删除</a> -->
                </div>
                <div class="previewIcon">
                    <i class="iconfont icon-fu_view"></i>
                </div>
            </div>
        </div>
        <div v-if="data.length === 0" class="empty">
            <n-empty description="没有组件" />
        </div>

        <n-modal v-model:show="open" preset="dialog" :show-icon="false" :style="{ width: '1200px' }">
            <Edit :data="editData" />
            <template #header>
                <div>组件内容设置</div>
            </template>
            <template #action>
                <div style="display: flex, justify-content: flex-end">
                    <n-space>
                        <n-button @click="onCancel">关闭</n-button>
                        <n-button @click="onOk" type="primary">确定</n-button>
                    </n-space>
                </div>
            </template>
        </n-modal>

        <n-modal v-model:show="preivewOpen" preset="dialog" :show-icon="false"
            :style="{ width: '800px',background: '#100F14' }">
            <div class="previewBody">
                <Preview :data="previewData" :code="previewCode" :preData="setPrevData" />
            </div>
            <template #header>
                <div>{{setPrevData.name || '组件预览'}}</div>
            </template>
            <!-- <template #action>
                <div style="display: flex, justify-content: flex-end">
                    <n-space>
                        <n-button @click="preivewOpen = false">关闭</n-button>
                    </n-space>
                </div>
            </template> -->
        </n-modal>
    </div>
    <n-modal v-model:show="delshowModel" preset="dialog" title="确认" content="你确认删除?" positive-text="确认" negative-text="算了"
        @positive-click="delSubmitCallback" @negative-click="delCancelCallback" />
</template>

<script setup lang="ts">
import { ref, onMounted, toRaw, reactive } from 'vue'
import { componentListApi, fetchComponentApi, createComponentApi, saveComponentApi, deleteComponentApi } from '../../api/path/component'

import Edit from './edit.vue'
import Preview from './preview.vue'

import { defaultImg } from '@/utils'


const open = ref(false)
const data = ref<any[]>([])
const editData = ref<any>(null)
const editType = ref<any>(null)
const preivewOpen = ref<any>(false)
const previewCode = ref<any>(null)
const previewData = ref<any>(null)
const searchV = ref()
const oldList = ref<any[]>([])  // 保存全部列表
const setPrevData = ref<any>(null)  // 预览的详情参数

const delshowModel = ref(false)
const delId = ref('');

onMounted(() => {
    componentListApi().then((res: any) => {
        
        data.value = res.data
        oldList.value = data.value
    })
})

const delSubmitCallback = () => {
    onDelete(delId.value)
}
const delCancelCallback = () => {
    delshowModel.value = false;
    delId.value = ''
}

const onAdd = () => {
    open.value = true
    editData.value = reactive({ name: '', remark: '', code: '', data: '', imgBase64: '', design_data: '' })
    editType.value = 'add'
}

const onEdit = async (id: any) => {
    const res = await fetchComponentApi(id)
    open.value = true
    editData.value = reactive(toRaw(res?.data))
    editType.value = 'edit'
}

const onOk = async () => {
    open.value = false
    var res: any = null;
    if(editType.value === 'add') {
        res = await createComponentApi(toRaw(editData.value))
        
    } else if(editType.value === 'edit') {
        res = await saveComponentApi(toRaw(editData.value))
    }

    if(res && res.code === 200) {
        const res2 = await componentListApi()
        data.value = res2?.data
    }

    editData.value = null
    editType.value = null
}
const onCancel = () => {
    open.value = false
    editData.value = null
    editType.value = null
}

 const openDelDialogBox = (id:string) => {
    delshowModel.value = true;
    delId.value = id;
 }

const onDelete = async (id: string) => {
    const res = await deleteComponentApi(id)
    if(res && res.code === 200) {
        const res2 = await componentListApi()
        data.value = res2?.data
    }
}
const onPreview = async (id: string) => {
    const res = await fetchComponentApi(id)
    if(res && res.data) {
        const { code, data } = res.data
        previewCode.value = code
        previewData.value = data ? JSON.parse(data) : {}
        setPrevData.value = res.data;
        console.log("data",res.data);
        preivewOpen.value = true
    }
}

// 搜索
const handelSearch = (e:any) => {
    console.log("e??",e);
    if(e){
        let arr = [];
        let brr= data.value.filter(v=>{
            if(v.name.indexOf(e) > -1 ){
                return v;
            }
        })
        let json = JSON.parse(JSON.stringify(brr));
        arr.push(json);
        data.value = arr[0]

    }else{
        data.value = oldList.value
    }
}
</script>

<style scoped lang="scss">
div,
p {
    box-sizing: border-box;
}

.component-wrapper {
    padding: 24px;

    .component-buttonbar {
        // padding-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 0 16px 30px;

        .csification {
            position: relative;
            display: flex;
        }

        .csification>button {
            margin-left: 6px;
        }

        .sreachBox {
            width: 175px;
        }
    }

    .component-list-wrapper {
        // display: flex;
        // gap: 30px;
        // flex-wrap: wrap;
        // justify-content: center;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(238px,1fr));
        grid-gap: 30px;
        grid-auto-rows: 230px;
        justify-content: center;
        
        
        .thumbnail {
            width: 220px;
            height: 140px;
            margin: 12px auto;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .component-list-item {
            // display: flex;
            // gap: 12px;
            // flex-wrap: wrap;
            width: 238px;
            height: 210px;
            border: 1px solid #2E2D32;
            border-radius: 4px;
            background: #232326;
            position: relative;
            margin: 0 auto;

            .name {
                width: 100%;
                color: #fff;
                font-size: 14px;
                padding: 0 12px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .time {
                float: left;
                margin-left: 12px;
                color: rgba(255, 255, 255, 0.5);
                font-size: 12px;
            }

            .remark {
                flex: 1 1 0%;
                display: none;
            }

            .iconfont {
                color: #fff;
                font-size: 15px;
                margin-left: 8px;
                opacity: 0.3;

                &:hover {
                    cursor: pointer;
                    opacity: 1;
                }
            }

            .button {
                position: absolute;
                bottom: 3px;
                right: 8px;


                a {
                    cursor: pointer;
                }
            }

            .previewIcon {
                position: absolute;
                top: 0;
                right: 5px;
                display: none;
            }

            &:hover {
                .previewIcon {
                    display: block;
                }
            }
        }
    }

    .empty {
        padding: 24px;
    }
}

.previewBody {
    min-height: 300px;
}

.component-wrapper {
    .component-list-wrapper {
        .component-list-item:hover {
            cursor: pointer;
            // background: rgb(187, 187, 187, 0.1);
        }
    }
}

.delColor {
    color: var(--n-text-color);
}
</style>